<template>
	<DiyPage :fullscreenScroll='false'>
		<cc-navigate title="我的订单" background-color="#fff">
			<cc-tabs :tabList="tabList" v-model="activeTab"></cc-tabs>
		</cc-navigate>
		<view class="tabs-content-swiper-wrap">
			<swiper class="tabs-content-swiper" :current="activeTab" :duration="300" @change="handleSwiperChange"
				@transition="handleSwiperTransition" @animationfinish="handleAnimationFinish">
				<swiper-item key="0">
					<ListOrder></ListOrder>
				</swiper-item>
				<swiper-item v-show="activeTab==1" key="1">
					<view class="content-item">
					</view>
				</swiper-item>
				<swiper-item v-show="activeTab==2" key="2">
					<view class="content-item">
					</view>
				</swiper-item>
			</swiper>
		</view>
	</DiyPage>
</template>

<script setup>
	import DiyPage from '@/diy/diy-page/diy-page.vue';
	import ListOrder from './components/list-order.vue';

	import {
		ref,
		onMounted,
		watch,
		computed,
		getCurrentInstance,
		nextTick,
	} from 'vue'

	const tabList = [{
			title: '点单',
			value: 0,
		},
		{
			title: '拼团',
			value: 1,
		},
		{
			title: '商城',
			value: 2,
		}
	];

	const activeTab = ref(0);

	// swiper 切换时触发
	const handleSwiperChange = (e) => {
		const current = e.detail.current;
		if (activeTab.value !== current) {
			activeTab.value = current;
		}
	}

	// swiper 过渡过程中触发（可用于更细腻的动画效果）
	const handleSwiperTransition = (e) => {}

	// swiper 动画结束时触发
	const handleAnimationFinish = () => {}
</script>

<style lang="scss" scoped>
	.tabs-content-swiper-wrap {
		display: flex;
		flex: 1;
	}

	.tabs-content-swiper {
		height: 100%;
		width: 100%;
	}
	
	
</style>